<template>
  <div id="app">
    <avue-form :option="option" v-model="form"> </avue-form>
    <h3>推荐使用</h3>

    <div class="list">
      <el-tooltip content="Top center" placement="top">
        <el-card
          type="flex"
          shadow="hover"
          effect="dark"
          content="Top Center 提示文字"
          placement="top"
        >
          <div class="inner-card" @click="biandan">
            <svg class="icon">
              <use xlink:href="#icon-dianpu"></use>
            </svg>
            <li>总是显示</li>
            <svg class="icon-ringht" @click.stop="liuchengtu">
              <use xlink:href="#icon-wenhao"></use>
            </svg>
          </div>
        </el-card>
      </el-tooltip>

      <el-tooltip content="Top center" placement="top">
        <el-card shadow="hover">
          <div class="inner-card">
            <svg class="icon">
              <use xlink:href="#icon-lipin"></use>
            </svg>
            <li>鼠标悬浮时显示</li>
          </div>
        </el-card>
      </el-tooltip>

      <el-tooltip content="点击？按钮可以查看流程图" placement="top" >
        <el-card shadow="hover">
          <div class="inner-card">
            <svg class="icon">
              <use xlink:href="#icon-dayin"></use>
            </svg>
            <li>从不显示</li>
          </div>
        </el-card>
      </el-tooltip>

      <el-tooltip content="Top center" placement="top" >
        <el-card shadow="hover">
          <div class="inner-card">
            <svg class="icon">
              <use xlink:href="#icon-dianpu"></use>
            </svg>
            <li>总是显示</li>
          </div>
        </el-card>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { startList } from "@/api/workmock";
export default {
  name: "App",
  components: {},
  data() {
    return {
      form: {},
      option: {
        labelWidth: 120,
        column: [
          {
            label: "搜索内容",
            prop: "search",
            type: "search",
            appendClick: () => {
              this.$message.success("搜索回调" + this.form.search);
            },
          },
        ],
      },
    };
  },

  mounted() {
    startList().then((res) => {
      console.log(res);
    });
  },
  methods: {
    liuchengtu() {
      alert("我要展示流程图");
    },
    biandan() {
      alert("我要展示表单");
    },
  },
};
</script>

<style>
.el-card {
  margin-right: 20px;
  height: 64px;

  border-radius: 13px;
  width: 387px !important;
}
/* .list :first-child :hover{
   border-radius: 16px;
  border: 1px solid #3370ff;
} */
/* .el-card .is-always-shadow :hover{
   border-radius: 16px;
  border: 1px solid #3370ff;
} */

.el-card__body {
  padding: 10px;
  width: 180px;
  height: 64px;
  line-height: 64px;
  width: 367px !important;
}
.icon {
  width: 32px !important;

  margin-right: 10px;
}
.list {
  height: 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.list li {
  list-style: none;
}
.inner-card {
  margin-top: -9px;
  height: 64px;
  display: flex;
}

.el-card {
  cursor: pointer;
}
.el-collapse-item__content {
  display: flex;
}
.avue-form__menu {
  display: none;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 32px;
  margin-top: 10px;
  width: 604px;
}
.avue-group .el-collapse,
.avue-group .el-collapse-item__wrap {
  border-radius: 9px;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  margin-top: 26px;
}
.inner-card [class^="icon-"] {
  width: 19px;
  margin-left: 222px;
}
</style>
